<template>
  <el-card :body-style="{padding:0,margin:0,borderRadius:'10px',width:mainWith+'px'}" shadow="always">
    <div class="acre-card-container" :style="{height:acreHeight+'px'}">
      <div class="acre-card-wrap">
        <div class="acre-card-img" :style="{backgroundImage:'url('+imgUrl+')',height:cardImgHeight+'px'}"></div>
        <div class="acre-card-info-wrap">
          <div class="acre-area-address-label">
            <el-tooltip effect="light" :content="address" placement="bottom">
              <div class="acre-info-address">{{address}}</div>
            </el-tooltip>
            <el-tooltip effect="light" :content="label" placement="top">
              <div class="acre-info-label">{{label}}</div>
            </el-tooltip>
          </div>
          <div class="acre-info-status-name">
            <div class="acre-info-name" :title="name">{{name}}</div>
            <div class="acre-info-status" :title="status.statusLabel" :style="{color:status.statusColor}">{{status.statusLabel}}</div>
          </div>
          <div class="acre-info-area"><span style="display:inline-block;width:70px">种植面积&nbsp;:&nbsp;</span>
            <el-tooltip effect="light" :content="area+''" placement="bottom">
              <span class="acre-area">{{area}}亩</span>
            </el-tooltip>
<!--            <div>-->
<!--              <span>亩</span>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
    export default {
        name: 'main-title',
        data(){
            return {
                flag: '',
                label: "",
                address: "",
                status: {
                    flag:'',
                    statusColor: '',
                    statusLabel: ''
                },
                area:'',
                name: '',
                imgUrl: '',
                showChecked: 1,
                acreWidth:0,
                acreHeight:0,
                cardImgHeight:0,
                mainWith:0
            }
        },
        created(){
            this.$dynamic(
                window,
                document,
                500,
                (height) => {
                    this.acreWidth = 210
                    this.acreHeight = height - 292
                    this.cardImgHeight = this.acreHeight * 0.4
                }
            );
        },
        beforeDestroy(){
            this.$unResize(window)
        },
        methods: {
            setData(obj){
                const {flag, label, address, area, name, imgUrl, status, width} = obj
                this.flag = flag
                this.label = label
                this.address = address
                this.area = area
                this.name = name
                this.imgUrl = imgUrl
                this.status = status
                this.mainWith = width
            }
        }
    }
</script>
<style lang="scss" scoped>
  .acre-card-container{
    color: #353535;
    cursor: pointer;
    .acre-card-wrap{
      border: 1px solid #fff;
      border-radius: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;
      .acre-card-img{
        border-radius: 4px;
        width: 100%;
        height: 90px;
      }
      .acre-card-info-wrap{
        .acre-area-address-label{
          display: flex;
          height: 30px;
          line-height: 30px;
          .acre-info-label{
            flex: 1;
            text-align: right;
            color: #00965b;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .acre-info-address{
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .acre-info-status-name{
          display: flex;
          align-items: center;
          height: 24px;
          line-height: 24px;
          .acre-info-status{
            flex: 2;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .acre-info-name{
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .acre-info-area{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 24px;
          line-height: 24px;
          .acre-area{
            box-sizing: border-box;
            display: inline-block;
            flex: 2;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .acre-radio{
            flex:1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            box-sizing: border-box;
          }
        }
      }
    }
    /*.acre-card-wrap:hover {*/
    /*  width: 214px;*/
    /*  height: 214px;*/
    /*  box-shadow: 8px 8px 10px #c3c3c3;*/
    /*}*/
  }

</style>
